<template>
  <div class="floor-comments">
    <div v-for="floorComment in comments" :key="floorComment.id" class="floor-item">
      <div class="comment-header">
        <el-avatar :src="floorComment.userAvatar" />
        <span class="author">{{ floorComment.userNickname }}</span>
      </div>
      <div class="comment-content">{{ floorComment.content }}</div>
      <div class="comment-actions">
        <el-button size="small" @click="$emit('reply', floorComment)">回复</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  comments: {
    type: Array,
    required: true
  }
});

defineEmits(['reply']);
</script>

<style scoped>
.floor-comments {
  margin-left: 30px;
  border-left: 2px solid #eee;
  padding-left: 15px;
}

.floor-item {
  margin: 10px 0;
  padding: 8px;
  background: #fdfdfd;
  border-radius: 3px;
}
</style>
